<template>
  <div class="flight-search-result">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading">加载中...</div>

    <!-- 搜索结果 -->
    <div v-if="flights.length > 0" class="search-results">
      <h2>{{ title }}</h2>
      <div class="flight-list">
        <div
          v-for="flight in flights"
          :key="flight.id"
          class="flight-card"
        >
          <div class="flight-info">
            <div class="flight-route">
              <span class="departure">{{ flight.departureCity }}→{{ flight.arrivalCity }}</span>
            </div>
            <div class="flight-time">
              <div class="departure-time">{{ formatDateTime(flight.departureTime) }}</div>
              <div class="arrival-time">{{ formatDateTime(flight.arrivalTime) }}</div>
            </div>
            <div class="flight-details">
              <div class="flight-number">航班号: {{ flight.flightNumber }}</div>
              <div class="available-seats">余票: {{ flight.availableSeats }}</div>
              <div v-if="flight.status" class="flight-status">状态: {{ flight.status }}</div>
            </div>
            <div class="flight-price">
              <div class="price">¥{{ flight.price }}</div>
              <button class="book-button" @click="bookFlight(flight)">预订</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!loading && showEmptyState" class="empty-state">
      <p>{{ emptyMessage }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlightSearchResult',
  props: {
    // 航班数据
    flights: {
      type: Array,
      default: () => []
    },
    // 标题
    title: {
      type: String,
      default: '搜索结果'
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 是否显示空状态
    showEmptyState: {
      type: Boolean,
      default: true
    },
    // 空状态消息
    emptyMessage: {
      type: String,
      default: '暂无航班信息'
    },
    // 是否显示详细信息（余票、状态）
    showDetails: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    formatDateTime(dateTimeString) {
      if (!dateTimeString) return ''
      const date = new Date(dateTimeString)
      return date.toLocaleString('zh-CN')
    },
    bookFlight(flight) {
      this.$emit('book-flight', flight)
    }
  }
}
</script>

<style scoped>
.flight-search-result {
  width: 100%;
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #666;
}

.search-results h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.flight-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flight-card {
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.flight-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.flight-info {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr 1fr;
  gap: 1rem;
  align-items: center;
}

.flight-route {
  display: flex;
  flex-direction: column;
}

.departure, .arrival {
  font-size: 1.2rem;
  font-weight: bold;
  color: #003366;
}

.arrow {
  color: #666;
  text-align: center;
  margin: 0.25rem 0;
}

.flight-time {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.departure-time, .arrival-time {
  font-size: 0.9rem;
  color: #666;
}

.flight-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.flight-number, .available-seats, .flight-status {
  font-size: 0.9rem;
  color: #666;
}

.flight-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #e74c3c;
}

.book-button {
  padding: 0.5rem 1rem;
  background-color: #27ae60;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.book-button:hover {
  background-color: #219a52;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: #666;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .flight-info {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }

  .flight-route {
    align-items: center;
  }

  .flight-price {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .flight-card {
    padding: 1rem;
  }

  .departure, .arrival {
    font-size: 1rem;
  }

  .price {
    font-size: 1.1rem;
  }
}
</style>